<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>初识Vue</title>
    <!--[if IE]>
    <link rel="shortcut icon" href="../images/logo.png" />
    <![endif]-->
    <link rel="icon" href="../images/logo.png" type="image/x-icon" />
    <!-- 引入Vue -->
    <script src="../js/vue.js" type="text/javascript"></script>
  </head>
  <body>
    <!--
        总结：
        1.想让Vue工作，必须创建一个Vue实例，并且传入一个配置对象；
        2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
        3.root容器里的代码被称为【Vue模板】；
        4.Vue实例与容器一一对应；
        5.开发中只有一个Vue实例，配合组件使用；
        6.{{}}中要写js表达式，{{}}中可以读取到data中的所有属性；
        7.一旦data中的数据发生变化，模板中用到该数据的地方会自动更新。

        注意区分 js表达式 和 js代码（语句）：
        1.表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方：
            （1）a
            （2）a+b
            （3）fn(args)
            （4）x === y ? 'a' : 'b'
        2.语句：
            （1）if(){}
            （2）for(){}
    -->

    <!-- 容器 -->
    <div id="root1">
      <h1>
        HELLO {{name}} {{version}}~~~~~~{{new Date(Date.now()).getSeconds()}}
      </h1>
    </div>
    <script type="text/javascript">
      // console.log("给productionTip赋值了");
      Vue.config.productionTip = false;

      new Vue({
        // el: document.getElementById('root'),// 一般不这么写
        el: "#root1", // el指定当前实例服务的容器，通常为css选择器
        data: {
          // data中存储数据，提供el指定的容器使用
          name: "Vue",
          version: "2.6.14",
        },
      });
    </script>
  </body>
</html>
